<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>demo</title>
		<style>
			#box{
				width: 400px;
				height: 600px;
				border: 1px solid;
				position: relative;
			}
			#bear{
				width: 20px;
				height: 20px;
				background-color: black;
				position: absolute;
				left: 10%;
				top: 60%;
			}
			#bar{
				width: 200px;
				height: 20px;
				position: absolute;
				left:50%;
				top: 80%;
				margin-left: -100px;
				border: 1px solid;
				border-radius: 10px;
			}
			#barColor{
				width: 0px;
				height: 20px;
				border-radius: 10px;
				background-color: black;
			}
			#power_num{
				width: 200px;
				height: 20px;
				position: absolute;
				left:50%;
				top: 75%;
				margin-left: -100px;
			}
			#num{
				font-size: 20px;
				position: absolute;
				left: 0;
			}
			#hr_div{
				height: 1px;
				width: 100%;
				background-color: black;
				position: absolute;
				top: 70%;
				margin-top: 20px;
			}
		</style>
		<script src="../js/jquery-3.3.1.min.js"></script>
	</head>
	<body>
		<div id="box">
			<div id="bear"></div>
			<div id="hr_div"></div>
			<div id="power_num"><span id="num">0</span></div>
			<div id="bar"><div id="barColor"></div></div>
		</div>
		
		<script>
			var firstTime=true;
			
			//power蓄力函数
			function Power(){
				let bar_width=0;
				let t1;
				$("body").one("touchstart",function(){
					t1=setInterval(()=>{
						bar_width=bar_width+1;
						$("#barColor").css({width:bar_width*2+"px"})
						$("#num").html(bar_width)
						$("#num").css({left:bar_width+"%"})
						if(bar_width>=100){
							clearInterval(t1);
						}
					},10)
				})
				$("body").one("touchend",function(){
					clearInterval(t1);
					$("#num").hide();
					BarReduce(bar_width);
					bearFly(bar_width);
				})
			}
			
			//bar点击减少函数函数
			function BarReduce(bar_width){
				t2=setInterval(()=>{
					bar_width=bar_width+0.5;
					$("#barColor").css({width:bar_width*2+"px"})
					if(bar_width>=100){
						$("#barColor").css({width:100*2+"px"})
					}
				},500)
				$("body").on("touchstart",function(){
					bearFly(20);
					bar_width-=10;
					if(bar_width<=0){
						bar_width=0;
						$("#barColor").css({width:bar_width*2+"px"})
						clearInterval(t2);
					}else{
						$("#barColor").css({width:bar_width*2+"px"})
					}
				})
			}
			
			//熊飞函数
			function bearFly(first_speed){
				var first_speed=-(first_speed*0.3);	//初速度
				var bear_top=getTop();
				now_top=bear_top+first_speed;
				if(now_top<=10){
					now_top=10;
				}
				if(firstTime==false){
					clearInterval(t3);
					$("#bear").animate({top:now_top+"%"},700,function(){
						firstTime=false
						t3=setInterval(()=>{
							now_top=now_top*1.01;
							if(now_top>=70){
								clearInterval(t3);
								clearInterval(t2);
								$("#bear").animate({left:60+"%"},1500)
								$("#barColor").animate({width:0+"px"},1500)
							}else{
								$("#bear").css({top:now_top+"%"});
							}
						},20)
					});
				}
				if(firstTime==true){
					$("#bear").animate({top:now_top+"%"},1000,function(){
						firstTime=false
						t3=setInterval(()=>{
							now_top=now_top*1.01;
							if(now_top>=70){
								clearInterval(t3);
								clearInterval(t2);
								$("#bear").animate({left:60+"%"},1500)
								$("#barColor").animate({width:0+"px"},1500)
							}else{
								$("#bear").css({top:now_top+"%"});
							}
						},20)
					});
				}
			}
			
			
			//获取熊当前高度函数
			function getTop(){
				let bear_top=$("#bear").css("top").split("px",1)[0]  
				let body_top=$("body").css("height").split("px",1)[0]  
				let position_top=Math.ceil(bear_top/body_top*100)
				return position_top;
			}
			Power();
			
			
		</script>
	</body>
</html>
